<!-- 在template里面编写网页元素html标签 或者添加vue组件 -->
<template>
  <!-- big-box:整个网页大小的大盒子 ，添加背景图片 -->
  <div class="big-box">
    <div class="user-box">
      <div class="title">
        <router-link to="/login">登录</router-link>
        <span>·</span>
        <router-link to="/register">注册</router-link>
      </div>
      <!-- 测试组件是否可用 -->
      <!-- <el-button type="primary">主要按钮</el-button> -->
      <!-- 表单部分： 
        el-form:elementui组件提供表单组件
        model:对应于响应式里面的数据对象
        rules:指定的规则
        ref:当前表单的引用名称

      -->
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="myLoginForm"
        label-width="0"
        class="demo-ruleForm"
      >
        <!-- el-form-item:一个表单项
              label:表单前面的标签 prop：组件属性
        -->
        <el-form-item prop="logname">
          <el-input
            placeholder="请输入用户名"
            v-model="loginForm.logname"
          ></el-input>
        </el-form-item>

        <!-- 登录密码 -->
        <el-form-item prop="logpwd">
          <el-input
            autocomplete="off"
            type="password"
            placeholder="请输入密码"
            v-model="loginForm.logpwd"
          ></el-input>
        </el-form-item>
        <!-- 登录同意条款 -->
        <el-form-item prop="checked">
          <el-checkbox name="type" v-model="loginForm.checked"
            >同意网站条款</el-checkbox
          >
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="login('myLoginForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- script是vue脚本编辑区域 -->
<script>
// 导入登录方法
import {login} from "@/api/admin.js"
export default {
  data() {
    //编写自定义验证规则：条款是否勾选，如果勾选通过，如果没有勾选给出错误提示
    //自定验证规则的方法
    var check = (rule, value, callback) => {
      //如果选择了复选框  同意
      //rule:表示使用该方法的规则对象  value:表示表单元素在触发之后的值 callback:回调函数
      console.log(rule);
      console.log(value);
      if (value) {
        //选中
        callback();
      } else {
        callback(new Error("条款必须要勾选"));
      }
    };

    return {
      // 表单注册响应式数据
      loginForm: {
        logname: "",
        logpwd: "",
        checked: false,
      },
      //创建规则对象,规则的名称 表单里面rules = 'rules'的值匹配
      //规则对象里面放规则的数组，数组名称需要和表单元素prop以及model里面的绑定的名称一致

      rules: {
        //用户名的填写规则，规则数组名称取决于  prop='logname'中的值
        logname: [
          //三个属性意思  required表示是否必须填写  message表示错误提示信息 trigger表示触发条件
          {
            required: true,
            message: "用户名没有填写",
            trigger: "blur",
          },
          //用户名 3-12个可用字符
          {
            pattern: /^[a-zA-Z\d_#$%]{3,12}$/,
            message: "长度为3-12，必须使用规定的字符(如：A-Za-z等)",
            trigger: "blur",
          },
        ],
        //用户登录密码规则
        logpwd: [
          //非空
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          //密码是6-12为有效字符
          {
            pattern: /^[a-zA-Z\d_#$%]{6,12}$/,
            message: "长度为6-12，必须使用规定的字符(如：A-Za-z等)",
            trigger: "blur",
          },
        ],
        //条框的规则   事件 change
        //validator表示验证所用的方法
        checked: [{ validator: check, trigger: "change" }],
      },
    };
  },
  // 编写方法
  methods: {
    login(formName) {
      // alert("点击登录");
      this.$message({
        message: "验证中……",
      });
      setTimeout(() => {
        // 利用ref选择当前表单对象，进行验证
        this.$refs[formName].validate((valid) => {
          // valid：验证结果  true/false
          if (valid) {
            // alert("验证通过");
            this.$message({
              message: "验证通过",
              type: "success",
            });
            // 发送登录请求
            login(this.loginForm)
              .then((res) => {
                console.log(res);
                // 获取服务器响应数据，渲染页面
                // code=0成功，给出提示，跳转到首页code-1失败，给出提示，清空登录表单
                if (res.data.code === 0) {
                  this.$message({
                    message: "登录成功",
                    type: "success",
                  });
                  // 本地存储：1）token 2）登录名
                  localStorage.setItem("token",res.data.token);
                  localStorage.setItem("logname",res.data.logname);
                  // 再存储用户id
                  // 路由跳转
                  this.$router.push("/index");
                } else if (res.data.code === -1) {
                  this.$message({
                    message: "用户名或密码错误",
                    type: "error",
                  });
                  // 清空
                  this.$refs[formName].resetFields();
                }
              })
              .catch((err) => {
                console.error(err);
                // 请求发生错误
                this.$message({
                  message: "请求服务器异常",
                  type: "error",
                });
              });
          } else {
            // alert("验证失败");
            this.$message.error("验证失败");
            // 返回false，让表单不提交
            return false;
          }
        });
      }, 1000);
    },
  },
};

/*
http://localhost:8080/elemrg/admin/login
请求方式post
参数：
"logname" String not null
"logpwd" String   not null

返回结果
成功:{  
"code": 0,
"msg": "登录成功",
"token": "93d915660a4c1b28",   //随机生成的动态令牌
"logname": "admin",  //登录用户名
"filename": null,   //头像的路径
"tmp_path": null
}
失败：{
"code": -1,   //返回状态码
"msg": "登录失败",   //返回信息
"token": null,
"logname": null,
"filename": null,
"tmp_path": null
}
*/
</script>

<!-- 样式编辑区域  scss:预编译   scoped:范围本组件 -->
<style lang="scss" scoped>
.login-btn {
  width: 100%;
}

// 这个样式是路由链接激活之后   !important 提升优先级
.router-link-active {
  color: orangered !important;
  font-weight: bold;
  border-bottom: 2px solid orangered !important;
}

.big-box {
  // 大盒子占据整个页面，定位
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("./img/9392941.jpg") no-repeat;
  background-size: cover;

  //登录框
  .user-box {
    width: 300px;
    min-height: 300px;
    background: #fff;
    margin: 60px auto;
    padding: 20px 30px;

    //标题：登录  注册样式
    .title {
      text-align: center;
      font-size: 20px;
      color: #969696;
      margin-bottom: 60px;

      // 超链接
      a {
        color: #969696;
        margin: 20px 15px;
        // border: 1px solid red;
        padding: 15px 10px;
      }
    }
  }
}
</style>
